<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header">
          <span >{{isJump?'试题修改':'试题录入'}}</span>
        </div>
        <el-form :rules="rules" ref="form" :model="form" label-width="100px">
          <el-form-item label="学科:" prop="subjectID">
            <el-select
              @change="getDirectory"
              v-model="form.subjectID"
              placeholder="请选择"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in subjectList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in directoryList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select v-model="form.enterpriseID" placeholder="请选择">
              <el-option
                :label="item.shortName"
                :value="item.id"
                v-for="item in companyList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" prop="province">
            <el-col :span="5">
              <el-select
                @change="getCitys"
                v-model="form.province"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in provincesList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>

            <el-col :span="5">
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in cityList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in directionList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:" prop="questionType">
            <el-radio-group
              v-model="form.questionType"
              @change="questionTypeChange"
            >
              <el-radio
                :label="item.value"
                v-for="(item, index) in questionTypeList"
                :key="index"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:" prop="difficulty">
            <el-radio-group v-model="form.difficulty">
              <el-radio
                :label="item.value"
                v-for="(item, index) in difficultyList"
                :key="index"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干:" prop="question">
            <quill-editor
              ref="myTextEditor"
              v-model="form.question"
              :options="editorOption"
              class="RTF"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="选项:" v-show="this.form.questionType !== 3">
            <el-form-item v-for="(item, index) in form.options" :key="index">
              <el-checkbox style="float:left" v-model="item.isRight" :max="1">{{ item.code }}:</el-checkbox>
              <el-input style="float:left;width:20%;margin: 10px;"  v-model="item.title"></el-input>
              <el-upload style="float:left"
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <i  class=" avatar-uploader-icon">上传图片</i>
              </el-upload>
            </el-form-item>
            <el-button type="danger" :disabled="disabled" @click="addOptions"
              >+增加选项与答案</el-button
            >
          </el-form-item>
          <el-form-item label="解析视频:">
            <el-input  v-model="form.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答案解析:" prop="answer">
            <quill-editor
              ref="myTextEditor"
              v-model="form.answer"
              :options="editorOption"
              class="RTF"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-input type="textarea" v-model="form.remarks"></el-input>
          </el-form-item>
          <el-form-item label="试题标签:">
            <el-select v-model="tags" placeholder="请选择" multiple>
              <el-option
                :label="item.label"
                :value="item.label"
                v-for="(item, index) in tagsList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit" v-if="isJump">确认修改</el-button>
            <el-button type="primary" @click="onSubmit" v-else>确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入富文本组件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

import { simple as subjectsList } from '@/api/hmmm/subjects'
import { list as companysList } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { simple as tagsList } from '@/api/hmmm/tags'
import { add, detail } from '@/api/hmmm/questions'

export default {
  data () {
    return {
      isJump: false, // 是否跳转
      optionsButton: 3, // 选项数量 下标
      disabled: true,
      imageUrl: '',
      content: '',
      editorOption: {
        placeholder: ''
      },
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        direction: '', // 方向
        questionType: 1, // 题型
        difficulty: 1, // 难度
        province: '', // 省份
        city: '', // 城市
        question: '', // 题干
        remarks: '', // 题目备注
        answer: '', // 答案解析
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ] // 选项
      },
      tags: '', // 试题标签
      subjectList: [], // 学科列表
      companyList: [], // 公司列表
      provincesList: [], // 省份列表
      cityList: [], // 城市列表
      directoryList: [], // 目录列表
      tagsList: [], // 标签列表
      directionList: [], // 方向列表
      difficultyList: [], // 难度列表
      questionTypeList: [], // 题型列表
      rules: {
        subjectID: [{ required: true, message: '请选择', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择', trigger: 'change' }],
        province: [{ required: true, message: '请选择', trigger: 'change' }],
        enterpriseID: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        direction: [{ required: true, message: '请选择', trigger: 'change' }],
        questionType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        question: [{ required: true, message: '请选择', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择', trigger: 'change' }],
        answer: [{ required: true, message: '请输入题干', trigger: 'change' }]
      }
    }
  },
  components: {
    quillEditor
  },
  mounted () {},
  created () {
    this.getSubject()
    this.getCompany()
    this.getProvinces()
    this.getDirectory()
    this.getConstants()
    this.route()
  },
  methods: {
    async route () {
      if (this.$route.query.id) {
        this.isJump = true
        const data = this.$route.query
        const res = await detail(data)
        console.log(res)
        this.form = res.data
      } else {
        this.isJump = false
      }
    },
    // 获取学科列表
    async getSubject () {
      const res = await subjectsList()
      this.subjectList = res.data
    },
    // 获取公司列表
    async getCompany () {
      const res = await companysList()
      this.companyList = res.data.items
    },
    // 获取省份列表
    async getProvinces () {
      this.provincesList = await provinces()
    },
    // 获取城市列表
    async getCitys () {
      const pname = this.form.province
      const res = await citys(pname)
      this.cityList = res
    },
    // 获取方向难度题型列表
    getConstants () {
      this.directionList = direction
      this.difficultyList = difficulty
      this.questionTypeList = questionType
    },
    // 获取目录、标签列表
    async getDirectory () {
      const data = {
        subjectID: this.form.subjectID
      }
      const res = await directoryList(data)
      const res1 = await tagsList(data)
      this.directoryList = res.data
      this.tagsList = res1.data
    },
    // 选项栏显示隐藏
    questionTypeChange () {
      if (this.form.questionType === 2) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    // 增加选项与答案
    addOptions () {
      this.optionsButton++
      const a = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
      this.form.options.push({ code: a[this.optionsButton], isRight: false, title: '', img: '' })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    onSubmit () {
      this.form.questionType = this.form.questionType.toString()
      this.form.difficulty = this.form.difficulty.toString()
      if (this.tags) {
        this.form.tags = this.tags.toString()
      }
      const data = this.form

      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          this.message.error('请检查必填项')
        } else {
          const res = await add(data)
          console.log(res)
          this.$message.success('添加成功*/')
          this.$refs.form.resetFields()
          this.$router.push('list')
        }
      })
    },
    onEditorChange ({ editor, html, text }) {
      this.content = html
    }
  }
}
</script>

<style scoped>
.RTF {
  height: 300px;
  margin-bottom: 50px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 14px;
    color: #303133;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
.demo-form-inline {
  padding-bottom: 25px;
}
</style>
